<template>
	<view class="m-16 bg-default radius-8 px-16 py-8 flex item-center relative">
		<slot name="left"></slot>
		<view class="flex flex-1 w-0 item-center">
			<image class="size-20 mr-4 flex-shrink" src="@/static/svg/icon-search.svg"></image>
			<input :value="modelValue" @input="onInput" @confirm="doSearch" class="fs-14 flex-1 w-0" :placeholder="placeholder" placeholder-class="text-color-hint" />
			<image v-if="modelValue" class="size-18 ml-4 mr-12 flex-shrink" src="@/static/svg/icon-input-clean.svg" @click="doClean"></image>
			<text class="fs-16 color-primary flex-shrink" @click="doSearch">搜索</text>
		</view>
		<slot name="right"></slot>
	</view>
</template>

<script setup name="SearchBar">
	
	const props = defineProps({
		placeholder: {
			type: String,
			default: '请输入'
		},
		modelValue: {
			type: String
		},
		// 是否立即搜索
		immediately: {
			type: Boolean,
			default: false
		}
	})
	
	const emits = defineEmits(['update:modelValue', 'search', 'clean'])
	
	
	const onInput = ({ detail }) => {
		emits('update:modelValue', detail.value)
		if (props.immediately) {
			doSearch()
		}
	}
	
	const doClean = () => {
		emits('clean')
	}
	
	const doSearch = () => {
		emits('search', props.modelValue)
	}
</script>
